<template>
    <div>
        <div v-if="!utils.getIsApp()" class="common-header-wrap">
            <mt-header class="common-header" title="茶旅">
                <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>
        <!-- <index-banner v-if="banners && banners.length > 0" :items="banners"></index-banner>
        <div class="mine-tea-order" @click="goorderlist">
            <img class="tea-order-icon" src="../../../assets/image/home/icon-tea-order.png">
            <div class="tea-order-title">订单</div>
        </div>
        <div class="label-title">
            <div class="label-title-font">热门景区</div>
            <div class="label-title-more" @click="tospot">更多</div>
        </div>
        <div class="hot-travel">
            <div class="hot-travel-list" v-for="item in spotlist" @click="tolinelist(item.id)">
                <img :src="item.image" class="hot-travel-img">
                <div class="hot-travel-name">{{item.name}}</div>
            </div>

            <div class="hot-travel-list" style="width: 1px;height: 10px"></div>
        </div>
        <div class="label-title">
            <div class="label-title-font">经典线路</div>
            <div class="label-title-more" @click="toline">更多</div>
        </div>

        <div class="travel-body">
            <div class="information-live" @click="goTeatraveldetail(item.id)" v-for="item in classiclist">
                <img class="information-video" :src="item.image">
                <div class="information-live-title">
                    {{item.name}}
                </div>
                <div class="information-live-foot">
                    <div class="information-live-price">¥{{item.money}} 起</div>
                                   <div class="information-live-btn">即刻出发</div>
                </div>
            </div>
        </div>

        <div @click="todiy" class="diy-main">
            <img class="diy-img" src="../../../assets/image/home/tea-travel-diy.png">
            <div class="diy-title">定制</div>
        </div> -->

        <div style="height: calc(100vh - 2rem);width: 100vw;background: white;display: flex;align-items: center;justify-content: center">
            <img style="display: block;margin: 0 auto;width: 100vw;height: auto" src="../../../assets/image/home/expect.png">
        </div>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import {getTravelspot, getTravelclassic} from '../../../api/travel'
    import IndexBanner from '../index/IndexBanner'
    import {mapState, mapActions} from 'vuex'

    export default {
        name: 'Teatravel',
        data() {
            return {
                spotlist: [], // 景区列表
                classiclist: [], // 首页经典列表
            }
        },
        components: {
            IndexBanner,
        },
        computed: {
            ...mapState({
                banners: state => state.home.banners,
            })
        },
        mounted() {
            this.fetchHomeAd({}).then(
                response => {
                },
                error => {
                    Toast(error.message)
                }
            );
            if (this.$route.query.token) {
                this.getmemberinformation({token: this.$route.query.token}).then(() => {
                    // this.$router.push({name:'MemberIndex'})
                });
            }
            this.getTravelspot();
            this.getTravelclassic();
        },
        methods: {
            ...mapActions({
                fetchHomeAd: 'fetchHomeAd',
                getmemberinformation: 'getmemberinformation'
            }),
            //前往茶旅订单
            goorderlist() {
                this.$router.push({name: 'HomeTeaorderlist'})
            },
            //前往详情
            goTeatraveldetail(id) {
                this.$router.push({name: 'HomeTeatraveldetail', query: {id,}})
            },
            // 前往更多经典线路
            toline() {
                this.$router.push({name: 'HomeTeatravelline'})
            },
            // 前往更多热门景区
            tospot() {
                this.$router.push({name: 'HomeTeatravelspot'})
            },
            //获取景区列表
            getTravelspot() {
                getTravelspot().then(res => {
                    this.spotlist = res.result;
                })
            },
            //获取首页经典
            getTravelclassic() {
                getTravelclassic().then(res => {
                    this.classiclist = res.result;
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //前往线路列表
            tolinelist(id) {
                this.$router.push({name: 'HomeTeatravelline', query: {id,}})
            },

            //前往自定义线路
            todiy() {
                this.$router.push({name: 'HomeTeatravelsubmit2'})
            }
        }
    }
</script>

<style scoped lang='scss'>
    ::-webkit-scrollbar {
        display: none;
    }

    .mine-tea-order {
        position: absolute;
        top: calc(40px + 5vw);
        right: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 100;

        .tea-order-icon {
            width: 20px;
            height: 20px;
        }

        .tea-order-title {
            margin-top: 3px;
            font-size: .6rem;
            /*font-weight: bold;*/
            color: white;
        }
    }

    .diy-main {
        position: fixed;
        top: 60vh;
        right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .diy-img {
            width: 38px;
            height: 38px;

        }

        .diy-title {
            font-size: .6rem;
            font-weight: bold;
            color: $primaryColor;
            margin-top: 3px;
        }
    }


    .label-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        margin: 0 20px;

        .label-title-font {
            font-size: .8rem;
            font-weight: bold;
        }

        .label-title-more {
            font-size: .6rem;
            color: #B5B5B5;
        }
    }

    .hot-travel {
        display: flex;
        flex-direction: row;
        overflow: scroll;
        padding: 0 20px;

        .hot-travel-list {
            display: flex;
            flex: none;
            flex-direction: column;
            align-items: center;
            margin-right: 20px;


            .hot-travel-img {
                width: 28vw;
                height: 21vw;
            }

            .hot-travel-name {
                margin-top: 5px;
                color: #B5B5B5;
                font-size: .6rem;
            }
        }
    }

    .travel-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 2vw;
        padding-bottom: 2vw;

        :nth-child(1) {
            margin-top: 0 !important;
        }

        :nth-child(2) {
            margin-top: 0 !important;
        }
    }

    .information-live {
        margin-left: 3vw;
        width: 44vw;
        margin-top: 3vw;
        background: white;
        box-shadow: 0 0 10px #ccc;
        border-radius: 8px;
    }

    .information-video {
        width: 44vw;
        height: 44vw;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .information-live-title {
        height: 1.8rem;
        padding: 5px 10px;
        padding-bottom: 0;
        font-size: .6rem;
        font-weight: bold;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }

    .information-live-foot {
        padding: 5px 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .information-live-price {
        color: $primaryColor;
        font-size: .7rem;
        font-weight: bold;
    }

    .information-live-btn {
        background: $primaryColor;
        color: white;
        font-size: .7rem;
        border-radius: 5px;
        padding: 3px 15px;

    }
</style>
